<template>
  <div>
    <div class="login_body">
      <div class="login_icon">
        <img src="@/assets/icons/小白.png"/>
      </div>
      <div>
        <input v-model="username" class="login_text" type="text" placeholder="请输入用户名">
      </div>
      <div>
        <input v-model="password" class="login_text" type="password" placeholder="请输入密码">
      </div>
      <div class="login_btn">
        <router-link tag="input" value="登录" type="submit" to="/">登录</router-link>
      </div>
      <div class="login_link">
        <router-link to="/Individual/Register">注册</router-link>
        <!--        <a href="#">找回密码</a>-->
      </div>
    </div>
  </div>
</template>

<script>
import {messageBox} from '../JS'

export default {
  name: 'Login',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    handleToLogin () {
      this.axios.post('api2/users/login', {
        username: this.username,
        password: this.password
      }).then((res) => {
        var status = res.data.status
        var This = this
        if (status === 0) {
          messageBox({
            title: '登录',
            content: '登录成功',
            ok: '确定',
            handleOk () {
              This.$router.push('/Individual/Center')
            }
          })
        } else {
          messageBox({
            title: '登录',
            content: '登录失败',
            ok: '确定'
          })
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  .login_body
    font-size: 16px
    margin: 0 .8rem
    .login_icon
      margin-top: 15px
      text-align: center
    .login_text
      width: 100%
      height: 40px
      border-bottom: 1px solid #25a4bb;
      text-align: center
    .login_link
      a
        font-size: 17px
        margin-top: 15px
        float: right
      /*display: flex*/
      /*justify-content: space-between*/
      /*a*/
      /*  float: left*/
      /*  text-decoration: none*/
      /*  margin-top: 15px*/
    .login_btn
      height: 42px
      margin-top: 35px
      input
        background: #66cdaa
        color: white
        width: 100%
        height: 100%
        margin: 0 auto
        border-radius: 18px
        border: none
        display: block
</style>
